@import "./reset.scss";
@import "./commo.scss";


main {
    .banner {
        width: 100%;
    }

    .top {
        .box1 {
            margin-top: 50px;
            text-align: center;

            .box2 {
                color: orange;
            }

            .box3 {
                color: dimgrey;
            }
        }
    }

    .img {
        width: 1000px;
        height: 500px;
        display: flex;
        margin: 30px auto;

        .box5 {
            width: 300px;
            height: 400px;
            color: grey;

            button {
                border: 1px solid rgb(12, 186, 30);
                color: rgb(12, 186, 30);
            }
        }

        .box4 {
            width: 700px;
            height: 400px;

            img {
                width: 700px;
                height: 370px;
            }

            .son1 {
                display: flex;
                justify-content: center;

                .son {
                    margin-left: 10px;
                }
            }

            .son:hover {
                color: orange;
            }

        }


    }

    .red {
        width: 1920px;
        height: 600px;
        background-color: rgb(72, 41, 10);

        .blue {
            text-align: center;

            .blue2 {
                margin: 50px;
                color: orange;
            }

            .blue3 {
                color: dimgrey;
            }
        }

        .song {
            display: flex;
            margin: 0 auto;
            width: 900px;
            height: 400px;
            margin-top: 50px;

            .song1 {
                padding: 10px 10px;

                h4 {
                    text-align: center;
                    color: aliceblue;
                    margin: 0 auto
                }

                ;

                img {
                    width: 100%;
                }

                p {
                    color: aliceblue;
                }

                button {
                    width: 60px;
                    height: 25px;
                    color: #fff;
                    background-color: rgb(72, 41, 10);
                    border: 1px solid#fff;
                    display: block;
                    margin: 5px auto;
                }

                width: 300px;
                height: 400px;
            }

        }
    }

    .big {
        width: 1920px;
        height: 600px;

        .big1 {
            text-align: center;

            .big2 {
                color: orange;
            }

            .biue3 {
                color: gray;
            }
        }

        .tang {
            width: 1300px;
            height: 400px;
            display: flex;
            margin: 20px auto;

            .tang2 {
                width: 300px;
                height: 400px;
                border: 1px solid grey;
            }

            .tang1 {
                margin-top: 30px;
                display: flex;
                width: 300px;
                height: 352px;
            }
        }


    }

    .han {
        width: 1920px;
        height: 400px;
        background-color: rgb(72, 41, 10);

        .han1 {
            text-align: center;

            .han2 {
                content: "";
                display: inline-block;
                width: 5%;
                height: 5px 1%;
                border-bottom: 1px solid grey;
                color: orange;
            }

            .han3 {
                color: grey;
            }
        }

        p {
            color: #fff;
        }

        button {
            color: #fff;
            background-color: rgb(72, 41, 10);
            border: 1px solid#fff;



        }

        .han5 {
            width: 1300px;
            height: 150px;
            display: flex;
            margin: 0 auto;

            .yi {
                width: 100px;
                height: 200px;
                margin: 0 auto;

            }
        }

    }

    .head {
        width: 1920px;
        height: 100px;

        .head1 {
            text-align: center;

            .head2 {
                color: orange;
            }

            .head3 {
                color: grey;
            }
        }
    }

    .name {
        display: flex;
        margin: 0 auto;
        width: 1200px;
        height: 430px;
        justify-content: space-around;

        .name1 {
            margin-top: 10px;
            width: 350px;
            height: 400px;

            button {
                width: 120px;
                height: 40px;
                display: block;
                margin: 10px auto;

            }
        }
    }

    .ktv {
        width: 1920px;
        height: 100px;

        .ktv1 {
            text-align: center;

            .ktv2 {
                color: orange;
            }

            .ktv3 {
                color: grey;
            }
        }
    }

    .ktv4 {
        width: 700px;
        height: 300px;
        border: 1px solid#000;
        margin: 0 auto;
        display: flex;

        .rood {
            .text {
                width: 300px;
                height: 150px;
            }
        }
        .rood1{
            width: 400px;
            height: 300px;
            border: 1px solid#000;
        }
    }
}

footer {
    height: 60px;
    background-color: sienna;

    .ktv5 {
        text-align: center;
        color: #f4f5f9;
    }

    .ktv6 {
        text-align: center;
        color: darkgrey;
    }
}